<template>
<div class="payways">
    <PersonalHeader :content="3"></PersonalHeader>
    <section class="securitycentermain">
        <section class="type">
            <h2>{{$t('payways[0]')}}</h2>
            <ul>
                <li v-for="(item, index) of paylist" :key="index">
                    <div class="line1">
                        <div class="left">
                            <img src="../../assets/img/icon-yinlian.png" v-if="item.payment_type == 1" alt="">
                            <img src="../../assets/img/icon-alipay.png" v-if="item.payment_type == 2" alt="">
                            <img src="../../assets/img/icon_weixin.png" v-if="item.payment_type == 3" alt="">
                            <span v-if="item.payment_type == 1">{{$t('payways[5]')}}</span>
                            <span v-if="item.payment_type == 2">{{$t('payways[6]')}}</span>
                            <span v-if="item.payment_type == 3">{{$t('payways[7]')}}</span>
                            {{item.card_num}} {{item.auth_name}}
                        </div>
                        <div class="right">
                            <button @click="openDialog(item)">{{$t('payways[1]')}}</button>
                            <img src="../../assets/img/payways-open.png" v-if="item.status" @click="changeStatus(item.payment_type,0)" alt="">
                            <img src="../../assets/img/payways-on.png" v-else @click="changeStatus(item.payment_type,1)" alt="">
                        </div>
                    </div>
                    <p class="line2" v-if="item.payment_type==1">{{item.bank}} {{item.branch}}</p>
                    <!-- <p class="line2" v-else>收款二维码  <i class="el-icon-s-grid"></i></p> -->
                </li>
                <li class="textright" v-if="paylist.length<3">
                    <el-button type="primary" @click="openDialog()">{{$t('payways[2]')}}</el-button>
                </li>
            </ul>
        </section>

        <el-dialog :title="$t('payways[2]')" width="40%" top="20vh" center :visible.sync="showDialog">
            <div class="input_box">
                <div class="item">
                    <p class="label">{{$t('payways[3]')}}</p>
                    <el-select v-model="payment_type" :placeholder="$t('payways[4]')">
                        <el-option :label="$t('payways[5]')" :value="1"></el-option>
                        <el-option :label="$t('payways[6]')" :value="2"></el-option>
                        <el-option :label="$t('payways[7]')" :value="3"></el-option>
                    </el-select>
                </div>
                <div class="item">
                    <p class="label">{{$t('payways[8]')}}</p>
                    <el-input v-model="name" type="text" :placeholder="$t('payways[9]')" autocomplete="off"></el-input>
                </div>
                <!-- 银行卡 -->
                <template v-if="payment_type == 1">
                    <div class="item">
                        <p class="label">{{$t('payways[10]')}}</p>
                        <el-input v-model="bank" type="text" :placeholder="$t('payways[11]')" autocomplete="off"></el-input>
                    </div>
                    <div class="item">
                        <p class="label">{{$t('payways[12]')}}</p>
                        <el-input v-model="card_num" type="text" :placeholder="$t('payways[13]')" autocomplete="off"></el-input>
                    </div>
                    <div class="item">
                        <p class="label">{{$t('payways[14]')}}</p>
                        <el-input v-model="branch" type="text" :placeholder="$t('payways[15]')" autocomplete="off"></el-input>
                    </div>
                </template>
                <div class="item" v-if="payment_type == 2">
                    <p class="label">{{$t('payways[16]')}}</p>
                    <el-input v-model="card_num" type="text" :placeholder="$t('payways[17]')" autocomplete="off"></el-input>
                </div>
                <div class="item" v-if="payment_type == 3">
                    <p class="label">{{$t('payways[18]')}}</p>
                    <el-input v-model="card_num" type="text" :placeholder="$t('payways[17]')" autocomplete="off"></el-input>
                </div>
                <div class="item" v-if="payment_type == 2||payment_type == 3">
                    <p class="label">{{$t('payways[19]')}}</p>
                    <el-upload :action="uploadUrl" :headers="headers" class="uploader" :show-file-list="false" :on-success="uploadSuccess" :before-upload="beforeupload">
                        <img :src="imgUrl" alt="">
                        <p class="upload_text">{{$t('payways[20]')}}</p>
                    </el-upload>
                </div>
                <div class="item">
                    <p class="label">{{$t('payways[21]')}}</p>
                    <el-input v-model="payment_password" type="password" :placeholder="$t('payways[22]')" autocomplete="off"></el-input>
                </div>
                <div class="item">
                    <p class="label">验证码</p>
                    <el-input v-model="v_code" type="number" placeholder="请输入验证码" autocomplete="off">
                        <template #append>
                            <send-code :ajax="direct_send_sms" />
                        </template>
                    </el-input>
                </div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="showDialog = false">{{$t('payways[23]')}}</el-button>
                <el-button type="primary" @click="submit">{{$t('payways[24]')}}</el-button>
            </div>
        </el-dialog>
    </section>
</div>
</template>

<script>
import PersonalHeader from "_dom/personalheader"
import sendCode from "_dom/sendCode"
import {
    mapActions
} from "vuex"
import {
    uploadimages
} from '@/api/authentication'
import {
    direct_send_sms
} from '@/api/user'
import {
    paylist,
    setstatus,
    paymentinfo,
    paymentadd
} from '@/api/fbTrade'
import {
    getToken,
    Passwordencryption
} from '@/libs/util'
export default {
    name: 'payways',
    data() {
        return {
            paylist: [],
            showDialog: false,
            payment_type: 1,
            name: '',
            card_num: '',
            bank: '',
            branch: '',
            account: '',
            file: '',
            payment_password: '',
            imgUrl: require('../../assets/img/upload.png'),
            uploadUrl: uploadimages(),
            headers: {
                "Authorization": "Bearer " + getToken("token"),
                "from": "pc"
            },
            isEdit: false,
            userinfo: '',
            v_code: '',
            direct_send_sms,
        }
    },
    watch: {
        'payment_type': function (newVal, oldVal) {
            if (newVal) {

            }
        }

    },
    created() {
        this.getdata();
        this.getUserInfo().then(res => {
            this.userinfo = res;
            this.name = res.auth.name;
        })
    },
    methods: {
        ...mapActions([
            'getUserInfo'
        ]),
        getdata() { //
            paylist().then(res => {

                this.paylist = res

            })
        },
        changeStatus(type, status) {
            let data = {
                status: status,
                payment_type: type
            }
            setstatus(data).then(res => {
                
                    this.$message.success(this.$t('fabi.Tips[8]'));
                    this.getdata()
                 
            })
        },
        getPayInfo(id) {
            paymentinfo(id).then(res => {
                 
                    let info = res
                    this.payment_type = info.payment_type;
                    this.name = info.auth_name;
                    this.bank = info.bank;
                    this.branch = info.branch;
                    this.card_num = info.card_num;
                    this.isEdit = true;
                
            })
        },
        openDialog(type) {
            if (this.userinfo.config.phone_bind != 1) {
                this.$message.error(this.$t('fabi.Tips[3]'));
                return false;
            }
            if (this.userinfo.user.authentication == 0) {
                this.$message.error(this.$t('fabi.Tips[4]'));
                return false;
            }
            if (this.userinfo.config.payment_password_set != 1) {
                this.$message.error(this.$t('fabi.Tips[7]'));
                return false;
            }
            if (type) {
                this.getPayInfo(type.payment_id)
            } else {
                this.bank = '';
                this.branch = '';
                this.card_num = '';
            }
            this.showDialog = true
        },
        beforeupload(file) {
            let than = this;
            if (file.size > 2 * 1024 * 1024) {
                this.$message.error(this.$t('payways[25]', {
                    num: 2
                }));
                return
            }
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function (e) {
                than.imgUrl = e.target.result;
            };
        },
        uploadSuccess(res) {
            if (res.status_code == 200) {
                this.file = res.data.relative_path;
            }
        },
        submit() {
            let data = {
                act: this.isEdit ? 'edit' : 'add', //'edit'
                payment_type: this.payment_type,
                auth_name: this.name,
                bank: this.bank,
                branch: this.branch,
                card_num: this.card_num,
                qrcode: this.file,
                payment_password: this.payment_password,
                v_code: this.v_code
            }
            paymentadd(Passwordencryption(data)).then(res => {
                 
                    this.$message.success('保存成功');
                    this.showDialog = false
                    this.getdata()
                    this.v_code = ''
                

            })
        }
    },
    components: {
        PersonalHeader,
        sendCode
    },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style lang="less" scoped>
.payways {
    min-height: 70vh;

    .securitycentermain {
        width: 1280px;
        margin: 0 auto;
        // height:491px;
        background: rgba(24, 35, 48, 1);
        border-radius: 10px;
        color: #fff;

        .type {
            background-color: #182330;
            border-radius: 4px;
            padding: 25px 15px;
            margin-bottom: 25px;

            h2 {
                font-size: 14px;
                color: #BBBBBB;
                border-bottom: 1px solid #383F53;
                padding-bottom: 25px;
            }

            ul {
                padding: 0 100px;

                li {
                    border-bottom: 1px solid #383F53;
                    line-height: 70px;

                    .line1 {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;

                        .left {
                            img {
                                margin-right: 20px;
                                vertical-align: middle;
                            }
                        }

                        .right {
                            button {
                                background-color: transparent;
                                color: #75A7FF;
                            }

                            img {
                                width: 65px;
                                vertical-align: middle;
                            }
                        }
                    }

                    .line2 {
                        color: #BBBBBB;
                        padding-left: 50px;
                    }
                }
            }
        }

        .input_box {
            .item {
                .label {
                    line-height: 40px;
                }

                .uploader {
                    background: rgba(19, 28, 40, 1);
                    border-radius: 4px;
                    padding: 20px;
                    text-align: center;

                    img {
                        max-width: 100%;
                    }
                }
            }

            .el-select {
                width: 100%;
            }
        }

        .dialog-footer {
            button {
                width: 200px;
            }
        }
    }
}
</style>
